<template>
	<view style="position: relative;">

		<image src="http://qiniuapplet.jiachuangnet.com/baoxiao.png"  style="width:750rpx;height: 490rpx;z-index:1;position: absolute;top:0;left:0">
		</image>
		<view style="width:700rpx;min-height:200rpx;position: absolute;top:0;left:25rpx;z-index: 100;">
			<u-navbar title-style="color:white" left-icon-color="white" title='预警库存'  :autoBack="true" bgColor="transparent" :placeholder="true"></u-navbar>
			<scroll-view scroll-x="true" class="scroll-Y" @scroll="scroll">
				<view style="display: flex;
			align-items: center;">
					<view v-for="(v,i) in warehouseList" :key="i" @click="selectWarehouse(v,i)"
						style="position:relative;margin:20rpx;margin-top:0;min-width:100rpx;color:white;">
						<view :class="active == i ? 'active':''" style="text-align: center;">{{v.areaName}}</view>
						<view v-if='active == i'  style="width: 30rpx;height:8rpx;background-color: white;border-radius:4rpx;position: absolute;bottom:-20rpx;left:50%;transform: translate(-50%,0);"></view>
						<!-- <image v-if='active == i' src="../../static/dot.png"
							style="z-index:1;width:30rpx;height:30rpx;position: absolute;top:0rpx;right:0;filter: brightness(100);"></image> -->
					</view>
				</view>
			</scroll-view>
			<view style="width: 700rpx;margin:20rpx auto;font-size: 24rpx;">
				<view v-if="list.length>0">
				<view  class="inventoryItem" v-for="(v,i) in list" :key="i">
					<view class="title">
					<view style='font-size: 28rpx;font-weight: 700;'>{{v.productName}}</view>
					<view style="width: auto;margin-left: 10rpx;">
						<!-- 1 正常 2 警告 3 紧急" -->
						<u-tag text="警告" type="warning" plain  :show="v.stockStatus===2"></u-tag>
						<u-tag text="紧急"type="error" plain  :show="v.stockStatus===3"></u-tag>
					</view>
					</view>
					<view style="padding:20rpx;" class="info">
						<view class="flex">
							<view class="flex" style="margin:0;">
								<view class="label" style="margin-right:10rpx;">库存:</view>
								<view>{{v.count || 0}}</view>
							</view>
							
							<view class="flex">
								<view class="label">颜色：</view>
								<view>{{v.colour || '暂无'}}</view>
							</view>
						</view>
						<view class="flex">
							<view class="flex">
								<view class="label">规格：</view>
								<view>{{v.norms || '暂无'}}</view>
							</view>
							<view class="flex">
								<view class="label">单位：</view>
								<view>{{v.unit || '暂无'}}</view>
							</view>
						</view>
						<view class="flex">
							<view class="flex">
								<view class="label">时间：</view>
								<view>{{v.updatedAt|| '暂无'}}</view>
							</view>
							<!-- <view class="flex">
								<view class="label">单价：</view>
								<view>{{v.price || '0'}}</view>
							</view> -->
							<view class="flex">
								<view class="label">编码：</view>
								<view>{{v.productCode}}</view>
							</view>
							
						</view>
					
						
					</view>
				</view>
				</view>
				<view v-else style="margin-top: 200rpx;">
					<u-empty
					        mode="data"
					        icon="http://cdn.uviewui.com/uview/empty/data.png"
							width="100%"
					>
					</u-empty>
				</view>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				color: app.globalData.defaultColor,
				warehouseList: [],
				areaId: '',
				active: 0,
				scrollTop: 0,
				pageNumber: 1,
				pageSize: 20,
				list: [],
				old: {
					scrollTop: 0
				}
			}
		},
		onLoad() {
			this.getAreaList()
		},
		onReachBottom(){
			this.pageNumber++;
			this.getList();
		},
		methods: {
			selectWarehouse(v, i) {
				this.active = i;
				this.areaId = v.area;
				this.pageNumber = 1;
				this.list = [];
				this.getList();
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			getList() {
				let params = {
					pageSize: this.pageSize,
					pageNumber: this.pageNumber,
					areaId: this.areaId,
					flag:1
				}
				uni.$u.http.post('/inventory/getInventoryList', params).then(res => {
					this.list = this.list.concat(res.data);
				})
			},
			getAreaList() {
				let params = {
					pageSize: 1000000000,
					pageNumber: 1
				}
				uni.$u.http.get('/areaLedger/areaList', {
					params: params
				}).then(res => {
					this.warehouseList = res;
					this.areaId = this.warehouseList[0].area;
					this.getList();
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scopde>
	.warehouse {
		width: 700rpx;
		margin: 0 auto;
	}

	.active {
		color: white;
		font-size: 30rpx;
		font-weight: 700;
	}

	.inventoryItem {
		width: 700rpx;
		background-color: white;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		overflow: hidden;
		// box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
	}

	.title {
		background: #f8e3ea;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:20rpx;
		border-bottom: 1rpx solid #DB1557;
	}
	.title-left{
		display: flex;
	}
	.label {
		color: #666;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
</style>